<template>
  <div class="left-header">
    <div class="picture">
      <img src="static/background.jpg" alt="">
    </div>
    <div class="info">
      <div class="name">{{ userinfo.username }}</div>
      <div class="menu">
        <i
          class="iconfont"
          @click="logout()"
          title="退出"
        >&#xeaf7;</i>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Head',
  computed: {
    ...mapState(['userinfo'])
  },
  methods: {
    logout () {
      this.$swal({
        title: '您确认退出吗？',
        icon: 'warning',
        buttons: {
          confirm: {
            text: '退出',
            value: true,
            visible: true,
            closeModal: true
          },
          cancel: {
            text: '取消',
            value: false,
            visible: true,
            closeModal: true
          }
        }
      }).then((res) => {
        if (res === true) {
          this.$emit('logout')
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .left-header
    padding 18px
    // box-sizing border-box
    .picture
      float left
      img
        width 40px
        height 40px
        border-radius 3px
        cursor pointer
    .info
      margin-left 50px
      height 40px
      display flex
      // 水平对齐
      justify-content space-between
      // 垂直居中
      align-items center
      color #fff
      .name
        font-size 18px
        cursor pointer
      .menu
        cursor pointer
</style>
